/**
 * 系统管理  字典管理
 */
<template>
  <div>
    <!-- 搜索筛选 -->
    <el-form ref="searchFrom" :inline="true" :model="formInline" class="user-search">
      <el-form-item prop="label" label="搜索：">
        <el-input v-model="formInline.label" size="small" placeholder="输入标签" />
      </el-form-item>
      <el-form-item prop="type" label="">
        <el-input v-model="formInline.type" size="small" placeholder="输入字典类型" />
      </el-form-item>
      <el-form-item prop="value" label="">
        <el-input v-model="formInline.value" size="small" placeholder="输入数据值" />
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">
          搜索
        </el-button>
        <el-button size="small" type="primary" icon="el-icon-delete" @click="resetForm('searchFrom')">
          重置
        </el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">
          添加
        </el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      v-loading="loading"
      size="small"
      :data="listData"
      highlight-current-row
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" prop="id" label="ID" width="60" />
      <el-table-column prop="label" label="标签" width="180" :show-overflow-tooltip="true" />
      <el-table-column prop="type" label="字典类型" width="180" :show-overflow-tooltip="true" />
      <el-table-column prop="value" label="数据值" width="180" :show-overflow-tooltip="true" />
      <el-table-column prop="description" label="描述" width="200" :show-overflow-tooltip="true" />
      <el-table-column prop="updateTime" label="修改时间" width="100" align="center" />
      <el-table-column sortable prop="sort" label="排序" width="80" align="center" />
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="deptDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination :child-msg="pageparm" @callFather="callFather" />
    <!-- 编辑界面 -->
    <el-dialog
      v-if="editFormVisible"
      :title="title"
      :visible.sync="editFormVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form ref="editForm" label-width="120px" :model="editForm" :rules="rules">
        <el-form-item label="标签" prop="label">
          <el-input v-model="editForm.label" size="small" auto-complete="off" placeholder="请输入标签" />
        </el-form-item>
        <el-form-item label="数据值" prop="value">
          <el-input v-model="editForm.value" size="small" auto-complete="off" placeholder="请输入数据值" />
        </el-form-item>
        <el-form-item label="字典类型" prop="type">
          <el-input v-model="editForm.type" size="small" auto-complete="off" placeholder="请输入字典类型" />
        </el-form-item>
        <el-form-item label="显示排序" prop="sort">
          <el-input-number v-model="editForm.sort" controls-position="right" :min="0" placeholder="排序编号" />
        </el-form-item>
        <el-form-item label="描述信息" prop="description">
          <el-input
            v-model="editForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="备注信息" prop="remarks">
          <el-input
            v-model="editForm.remarks"
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">
          取消
        </el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listDict, addDict, updateDict, delDict } from '@/api/userMG'
import Pagination from '@/components/Pagination'
// eslint-disable-next-line no-unused-vars
const validateNumber = (rule, value, callback) => {
  const numberReg = /^\d+$|^\d+[.]?\d+$/
  if (value !== '') {
    if (!numberReg.test(value)) {
      callback(new Error('请输入数字'))
    } else {
      // eslint-disable-next-line no-lonely-if
      if (value === '' || value === undefined || value === null) {
        callback()
      } else if (!Number(value)) {
        callback(new Error('请输入[1,20000]之间的数字'))
      } else if (value < 1 || value > 20000) {
        callback(new Error('请输入[1,20000]之间的数字'))
      } else {
        callback()
      }
    }
  } else {
    callback(new Error('请输入值'))
  }
}
export default {
  // 注册组件
  components: {
    Pagination
  },
  data () {
    return {
      clearable: false, // 清空搜索框
      nshow: true, // switch开启
      fshow: false, // switch关闭
      loading: false, // 是显示加载
      listData: [], // 字典列表数据
      editFormVisible: false, // 控制编辑页面显示与隐藏
      disabled: false, // 是否禁用下拉框
      title: '',
      options: [], // 下拉框数据
      // 添加编辑
      editForm: {
        id: '',
        value: '',
        type: '',
        sort: '',
        label: '',
        description: '',
        remarks: ''
        // token: localStorage.getItem('logintoken')
      },
      // 删除字典
      seletedata: {
        deptId: ''
        // token: localStorage.getItem('logintoken')
      },
      // rules表单验证
      rules: {
        value: [{ required: true, message: '请输入数据值', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }],
        type: [{ required: true, message: '请输入字典类型', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        label: [{ required: true, message: '请输入标签', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }],
        description: [{ message: '请输入描述', trigger: 'blur' },
          { min: 0, max: 100, message: '最大 100 个字符', trigger: 'blur' }],
        remarks: [{ message: '请输入备注', trigger: 'blur' },
          { min: 0, max: 255, message: '最大 255 个字符', trigger: 'blur' }]
      },
      formInline: {
        pageNum: 1,
        pageSize: 10,
        label: '',
        value: '',
        type: ''
        // token: localStorage.getItem('logintoken')
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  /**
   * 创建完毕
   */
  created () {
    this.getdata(this.formInline)
  },
  methods: {
    // 获取公司列表
    getdata (parameter) {
      this.loading = true
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      listDict(parameter)
        .then((res) => {
          this.loading = false
          // eslint-disable-next-line eqeqeq
          if (res.code != 0) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.listData = res.data.list
            // 分页赋值
            this.pageparm.currentPage = this.formInline.pageNum
            this.pageparm.pageSize = this.formInline.pageSize
            this.pageparm.total = res.data.total
          }
        })
        // eslint-disable-next-line handle-callback-err
        .catch((err) => {
          this.loading = false
          this.$message.error('菜单加载失败，请稍后再试！')
        })
    },
    // 搜索事件
    search () {
      this.formInline.pageNum = 1
      this.getdata(this.formInline)
    },
    // 重置按钮
    resetForm (formName) {
      // 重置要看 <el-form-item>的组件元素上是否指定了字段名。指定了才会重置生效
      this.$refs[formName].resetFields()
      this.formInline.pageNum = 1
      this.getdata(this.formInline)
    },
    // 显示编辑界面
    handleEdit (index, row) {
      this.editFormVisible = true
      if (row !== undefined && row !== 'undefined') {
        this.title = '编辑'
        this.disabled = true
        this.editForm.id = row.id
        this.editForm.sort = row.sort
        this.editForm.value = row.value
        this.editForm.type = row.type
        this.editForm.label = row.label
        this.editForm.description = row.description
        this.editForm.remarks = row.remarks
      } else {
        this.title = '添加'
        this.disabled = false
        this.editForm.id = ''
        this.editForm.sort = ''
        this.editForm.value = ''
        this.editForm.type = ''
        this.editForm.label = ''
        this.editForm.description = ''
        this.editForm.remarks = ''
      }
    },
    // 编辑、增加页面保存方法
    submitForm (editData) {
      this.$refs[editData].validate((valid) => {
        if (valid) {
          if (this.title === '添加') {
            addDict(this.editForm)
              .then((res) => {
                this.editFormVisible = false
                this.loading = false
                if (res.code === 0) {
                  this.getdata(this.formInline)
                  this.$message({
                    type: 'success',
                    message: '字典保存成功！'
                  })
                } else {
                  this.$message({
                    type: 'info',
                    message: res.msg
                  })
                }
              })
              // eslint-disable-next-line handle-callback-err
              .catch((err) => {
                this.editFormVisible = false
                this.loading = false
                this.$message.error('字典保存失败，请稍后再试！')
              })
          }
          if (this.title === '编辑') {
            updateDict(this.editForm)
              .then((res) => {
                this.editFormVisible = false
                this.loading = false
                if (res.code === 0) {
                  this.getdata(this.formInline)
                  this.$message({
                    type: 'success',
                    message: '字典保存成功！'
                  })
                } else {
                  this.$message({
                    type: 'info',
                    message: res.msg
                  })
                }
              })
              // eslint-disable-next-line handle-callback-err
              .catch((err) => {
                this.editFormVisible = false
                this.loading = false
                this.$message.error('字典保存失败，请稍后再试！')
              })
          }
        } else {
          return false
        }
      })
    },
    // 删除字典
    deptDelete (index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // eslint-disable-next-line no-undef
          delDict(row.id)
            .then((res) => {
              if (res.code === 0) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '字典已删除!'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            // eslint-disable-next-line handle-callback-err
            .catch((err) => {
              this.loading = false
              this.$message.error('字典删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 分页插件事件
    callFather (parm) {
      this.formInline.pageNum = parm.currentPage
      this.formInline.pageSize = parm.pageSize
      this.getdata(this.formInline)
    },
    // 关闭编辑、增加弹出框、并清空数据
    closeDialog () {
      this.editFormVisible = false
      // this.$refs[formName].resetFields()
      // this.$nextTick(() => {
      //   this.$refs.editForm.resetFields()
      // })
    }
  }
}
</script>
<style lang="scss">

</style>
